<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>门店收入报表</title>
    <#include "/common/link.ftl" >
<script src="/js/plugins/echarts/echarts.common.min.js"></script>
</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl" >

    <#assign currentMenu="businessReport"/>

    <#include "/common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>门店收入报表</h1>
        </section>
        <section class="content">
            <div class="box">
                <div style="margin: 10px;">
                    <!--高级查询--->
                    <form class="form-inline" id="searchForm" action="/customerReport/list" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label>门店查询</label>
                            <select class="form-control" name="businessId">
                                <option value="">请选择门店</option>
                                <#list businesses as b>
                                    <option value="${b.id}">${b.name}</option>
                                </#list>
                            </select>
                        </div>
                        <script>
                            $('select[name=businessId]').val(${qo.businessId})
                        </script>
                        <div class="form-group">
                            <label>时间段查询:</label>
                            <div class="input-daterange input-group" >
                                <input type="text" class="input-sm form-control input-date" name="startDate" value="${((qo.startDate)?string("yyyy-MM-dd"))!}"/>
                                <span class="input-group-addon">到</span>
                                <input type="text" class="input-sm form-control input-date" name="endDate" value="${((qo.endDate)?string("yyyy-MM-dd"))!}"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>预约类型</label>
                            <select class="form-control">
                                <option value="">请选择预约类型</option>
                                <option value="1">预约</option>
                                <option value="0">非预约</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="status">分组类型:</label>
                            <select class="form-control" name="queryName">
                               <#list enums as e>
                                   <option value="${e.name()}">${e.getName()}</option>
                               </#list>
                            </select>
                        </div>
                        <script>
                            $('select[name=queryName]').val('${qo.queryName}')
                        </script>
                        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询</button>
                        <button type="button" class="btn btn-info btn-chart" >
                            <span class="glyphicon glyphicon-stats"></span> 柱状图
                        </button>
                    </form>
                </div>
                <div class="box-body table-responsive no-padding ">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>分组类型</th>
                                <th>总订单数</th>
                                <th>总消费金额</th>
                                <th>总实收金额</th>
                                <th>总优惠金额</th>
                            </tr>
                        </thead>
                        <tbody>
                        <#list Items as m>
                            <tr>
                                <td>${m.groupByName}</td>
                                <td>${m.count}</td>
                                <td>${m.totalAmount}</td>
                                <td>${m.payAmount}</td>
                                <td>${m.discountAmount}</td>
                            </tr>
                        </#list>
                        </tbody>

                    </table>
                    <#include "/common/page.ftl">
                </div>
            </div>
        </section>
    </div>
    <#include "/common/footer.ftl">
</div>

<!-- Modal模态框 -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" style="width: 60%;" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div id="main" style="width: 1000px;height:600px;"></div>
                <script>
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        legend: {
                            data: ['应收金额', '实收金额', '优惠金额']
                        },

                        xAxis: [
                            {
                                type: 'category',
                                data: [
                                    <#list Items as item>
                                    '${item.groupByName}',
                                    </#list>
                                ],
                            }
                        ],

                        yAxis: [
                            {
                                type: 'value',
                                min: 0,
                                max: 60000,
                                interval: 10000,

                            },
                            {
                                type: 'value',
                                min: 0,
                                max: 100,
                                interval: 10,

                            }
                        ],
                        series: [
                            {
                                name: '应收金额',
                                type: 'bar',
                                data: [
                                    <#list Items as item>
                                    ${item.totalAmount},
                                    </#list>
                                ]
                            },
                            {
                                name: '实收金额',
                                type: 'bar',
                                data: [
                                    <#list Items as item>
                                    ${item.discountAmount},
                                    </#list>
                                ]

                            },
                            {
                                name: '优惠金额',
                                type: 'line',
                                yAxisIndex: 1,
                                data: [
                                    <#list Items as item>
                                    ${item.payAmount}
                                    <#if item_index < (item?size-1)>
                                        ,
                                    </#if>
                                    </#list>
                                ]
                            }
                        ]

                    };

                    option && myChart.setOption(option);
                </script>
            </div>
        </div>
    </div>
</div>
<script>
    $('.btn-chart').click(function () {
        $('#chartModal').modal('show');
    })
</script>
</body>
</html>